$(function () {
    $.ajax({
        url: 'http://192.168.23.81:3000/api/getcategorytitle',
        dataType: 'json',
        success: function (data) {
            //应用data数据将template3里面的模板转化为html字符串
            var html1 = template('template3', data);
            //将拼接好的字符串添加到container里面
            $('#container').html(html1)
            // container 里面找到所有的P标签 用each循环添加点击事件
                .find('p').each(function (i, v) {
                $(v).click(function () {
                    // 获取#container下所有的ul赋值给$uls
                    var $uls = $('#container ul');
                    // 判断所有的ul当中索引值为i的ul里面有没有内容
                    // 即 当前点击的p标签对应的ul里面有没有内容
                    // 没有内容就进入if  进行aJax请求 有内容就跳出 不请求
                    if (!$uls.eq(i).html()) {
                        $.ajax({
                            //数据地址
                            url: 'http://192.168.23.81:3000/api/getcategory',
                            // 请求方式是type
                            // dataType  是数据类型
                            dataType: 'json',
                            // 请求时传递的参数
                            data: {titleid: i},
                            // 数据获取成功后的回调函数
                            success: function (data) {
                                // 使用data将模板template4转化成html字符串
                                var html = template('template4', data);
                                // 将当前点击的p标签对应的ul的内容设置为html
                                $uls.eq(i).html(html);
                            }
                        })
                    }
                    // class就是类
                    // 判断 当前点击的p标签对应的ul是不是有hide这个类名
                    //有的话  就让所有的ul添加hide类名 将其隐藏
                    if ($uls.eq(i).hasClass('hide')) {
                        $uls.addClass('hide')
                    }
                    // 当前点击的p标签对应的ul 是不是有hide这个类名
                    // 有就移除  没有就添加
                    $uls.eq(i).toggleClass('hide');
                })
            })
        }
    });
});